﻿@page "/Articles"
@using iOSClub.WebSite.Models

<PageTitle>社团文章 - 西建大iOS Club</PageTitle>

<meta name="referrer" content="never">

<div style="text-align: center;">
    <Image Preview="false" Src="/Centre/Article.jpg"/>
    <Flex Align="center" Justify="center">
        <div class="gradient-text">iOS Club 技术博客</div>
    </Flex>
    <Paragraph Style="font-size: 22px" Strong Type="secondary">记录每一个思维的并发点</Paragraph>
</div>

<GridRow Gutter="(16, 16)" Style="padding: 20px">
    @foreach (var context in RssModels)
    {
        <GridCol Xs="24" Sm="24" Md="12" Lg="12" Xl="12" Xxl="12" 
                 Style="padding: 10px;">
            <a href="@context.Url" target="_blank">
                <Card Hoverable Class="div" Bordered="false">
                    <Flex Vertical Style="height: 100%" Justify="center" Align="center">
                        <Title Level="3">
                            @context.Title
                        </Title>
                        <img alt=""
                             src="@context.Image"
                             style="width:80%;text-align: center"/>
                    </Flex>
                </Card>
            </a>
        </GridCol>
    }
</GridRow>

@if (RssModels.Length == 0)
{
    <Empty Image="https://gw.alipayobjects.com/zos/antfincdn/ZHrcdLPrvN/empty.svg" Style="text-align: center;">
        <DescriptionTemplate>
            <span>暂无文章</span>
        </DescriptionTemplate>
    </Empty>
}

<div style="padding: 30px">
    @if (Entries.Count > 0)
    {
        <Title>更多订阅</Title>
    }

    <div style="padding: 30px;width: 100%">
        @foreach (var context in Entries)
        {
            <a href="@context.Link[0].Href" target="_blank" class="a-btn">
                <Flex Justify="space-between" Align="center">
                    <Paragraph>@($"{context.Title}")</Paragraph>
                    <Paragraph Type="secondary">@context.Updated.ToString("yyyy-MM-dd")</Paragraph>
                </Flex>
            </a>
        }
    </div>
</div>

@code {

    private RssModel[] RssModels { get; set; } = [];
    private List<Entry> Entries { get; set; } = [];

    protected override async Task OnInitializedAsync()
    {
        RssModels = await RssArticle.GetArticleAsync();
        Entries = await WebArticle.GetArticleAsync();
        await base.OnInitializedAsync();
    }

}

<style>
    .div{
        margin: 10px;
        max-height: 270px;
        max-width: 100%;
        background: #f3f5f7;
        border-radius: 10px;
        overflow: hidden;
    }

    .a-btn {
        display: inline-block;
        transition: .2s;
        cursor: pointer;
        margin: 0 0 5px 5px;
        width: 100%;
        border-radius: 10px;
        padding: 5px;
        border: none;
        font-size: 18px;
        color: #1c1f23;
    }

    .a-btn:hover {
        background-color: #f3f5f7;
        color: #1c1f23;
        transform: scale(1.02);
    }
</style>